<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>
<body>
    <div>
        <h2>JSONP  实现  模仿百度搜索</h2>
        <div>
            <input type="text" placeholder="请输入" id="keyword" class="keyword">
            <button class="searchbtn">点击搜索</button>
        </div>
        <ul class="list">
            
        </ul>
    </div>

    <script>
        var keyword = document.getElementsByClassName("keyword")[0];
        var searchbtn = document.getElementsByClassName("searchbtn")[0];
        var list = document.getElementsByClassName("list")[0];
        
        // https://www.baidu.com/sugrec
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=w&req=2
        // &bs=%E6%AD%A6%E6%B1%89&pbs=%E6%AD%A6%E6%B1%89&csor=1
        // &cb=jQuery1102002449024934391586_1630043850706&_=1630043850725
        
        // wd  搜索的关键字
        // cb  
        searchbtn.onclick = function(){
            // Promise 对象
            $.jsonp({
                url:"https://www.baidu.com/sugrec",
                data:{
                    pre:1,
                    p:3,
                    ie:"utf-8",
                    json:1,
                    prod:"pc",
                    from:"pc_web",
                    sugsid:"31254,26350",
                    csor:1,
                    wd:keyword.value,  // 搜索关键字 
                },
                jsonp:'cb',
            })
            .then(res=>{
                console.log(res)
                var html = "";
                res.g.forEach((l,i)=>{
                    html += '<li>'+l.q+'</li>';
                })
                list.innerHTML = html;
            })
        }
    </script>
</body>
</html>